<template>
  <div class="container">
    <div class="left">
      <WeatherWidget />
      <MusicPlayer :songs="songs" />
      <UserCard />
    </div>
    <div class="right">
      <RouterView v-slot="{ Component, route }">
        <component :is="Component" :key="route.path" />
      </RouterView>
    </div>
  </div>
  <FloatingButtons :actions="actions" @add="router.push('/blogs/add')" />
</template>

<script setup>
import UserCard from "@/views/cards/UserCard.vue"
import FloatingButtons from "@/components/FloatingButtons.vue"
import MusicPlayer from "@/components/MusicPlayer.vue"
import WeatherWidget from "@/components/WeatherWidget.vue"
import { useRouter } from "vue-router"
import { onBeforeMount, ref } from "vue"
import { GetMusicsView, GetUserInfo, UpdateUserView } from "@/apis/allAPI/user"
import { storeToRefs } from "pinia"
import appStore from "@/stores"

const router = useRouter()

const actions = [{ name: "add", icon: "fas fa-pencil", tooltip: "写文章" }]
const songs = ref([])
const { isFirst } = storeToRefs(appStore.userStore)

onBeforeMount(() => {
  GetMusicsView((r) => {
    songs.value = r
  })
  GetUserInfo((rData) => {
    rData.avator = "/test.jpg"
    appStore.userStore.updateUserinfo(rData)
    if (isFirst.value) {
      UpdateUserView(() => {
        appStore.userStore.userinfo.view_nums += 1
        isFirst.value = !isFirst.value
      })
    }
  })
})
</script>

<style scoped>
.container {
  max-width: 1400px;
  margin: 10px auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 35px;
  padding: 0 30px;
}

.left {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: sticky;
  top: 100px;
  height: fit-content;
}

.right {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (max-width: 1100px) {
  .container {
    grid-template-columns: 1fr;
  }

  .left {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .left {
    grid-template-columns: 1fr;
  }
}
</style>
